<template>
  <nest-page>
    <div class="reserves-data-filling-box">
      <div class="left-district-box">
        <div class="name_of_administrative_region">
          <span class="region_name">行政区</span>
        </div>

        <div class="left-filling-content">
          <div class="tree-top-box">
            <el-tree class="tree-line" :props="defaultProps" :indent="0" :data="data" />
          </div>
          <div class="tree-bottom-box">
            <el-tree class="tree-line" :props="defaultProps" :indent="0" :data="data" />
          </div>
        </div>
      </div>

      <div class="right-reserves-data-filling-box">
        <!-- 页签 -->
        <div class="options-warp">
          <span :class="{ item: optionsName === item.name }" class="options-item" @click="changeList(item)" v-for="item in optionsList">{{ item.name }}</span>
        </div>
        <!-- 内容 -->
        <div class="right-content scoll-warp">
          <component :is="tagName" />
        </div>
        <!-- 按钮 -->
        <div class="bottom-btn fx-center">
          <el-button type="primary">
            <el-icon><Check /></el-icon>
            提交
          </el-button>
        </div>
      </div>
    </div>
  </nest-page>
</template>

<script setup>
// 基本信息
import basicInfo from './components/basicInfo.vue';
// 资源储量
import reserves from './components/reserves.vue';
// 坐标
import coordinates from './components/coordinates.vue';
import { Check } from '@element-plus/icons-vue';

const defaultProps = {
  children: 'children',
  label: 'label'
};
const data = [
  {
    label: 'Level one 1',
    children: [
      {
        label: 'Level two 1-1',
        children: [
          {
            label: 'Level three 1-1-1'
          }
        ]
      }
    ]
  },
  {
    label: 'Level one 2',
    children: [
      {
        label: 'Level two 2-1',
        children: [
          {
            label: 'Level three 2-1-1'
          }
        ]
      },
      {
        label: 'Level two 2-2',
        children: [
          {
            label: 'Level three 2-2-1'
          }
        ]
      }
    ]
  }
];

const tagName = shallowRef(basicInfo);

const optionsList = shallowRef([
  {
    name: '基本信息',
    compName: basicInfo
  },
  {
    name: '资源储量',
    compName: reserves
  },
  {
    name: '矿山经济'
  },
  {
    name: '矿产品'
  },
  {
    name: '采选环'
  },
  {
    name: '综合回收'
  },
  {
    name: '地质条件'
  },
  {
    name: '坐标',
    compName: coordinates
  },
  {
    name: '报告'
  },
  {
    name: '压覆'
  },
  {
    name: '备选资源储量'
  }
]);
const optionsName = ref('基本信息');

function changeList(item) {
  optionsName.value = item.name;
  tagName.value = item.compName;
}

const fillInForm = ref({});
provide('fillInForm', fillInForm);
</script>
